<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <script>
        // function debounce(func,time){
        //     let timeoutId;
        //     return function(e){
        //         if(timeoutId){
        //             clearTimeout(timeoutId);
        //         }
        //         timeoutId = setTimeout(() => {
        //             func(e);
        //         },time);
        //     }
        // }
        // let ipt = document.getElementById("ipt");
        // let timeoutId;
        // ipt.oninput = debounce(function(e){
        //     console.log(e);
        // },500);

        // function throttling(func,time){
        //     let st = 0;
        //     return function(e){
        //         let end = new Date().getTime();
        //         // console.log(end);
        //         if(st == 0 || end - st > time){
        //             st = new Date().getTime()
        //             func(e);
        //         }
        //     }
        // }
        

        function throttling(func,time){
            let timeoutId;
            return function(e){
                if(timeoutId){
                    return;
                }
                timeoutId = setTimeout(() => {
                    func(e);
                    timeoutId = 0;
                },500);
            }
        }
        ipt.oninput = throttling(function(e){
            console.log(e.target.value);
        },500);

        let ary = [1,2,3,4,5,6,7,8,9,10];
        let sum = ary.reduce((a,b) => {
            console.log(a,b);
            return a + b;
        });
        console.log(sum);
        
    </script>
</body>
</html>